<template>
  <div>
    <div class="search">
      <div class="box head">
        <input v-model="keyword" @blur="handleblur"  class="search-input" type="text" placeholder="搜索" >
        <router-link tag="div" to="/" class="back">取消</router-link>
      </div>
      <div class="search-content" v-show="keyword">
        <ul>
          <router-link tag="li" :to="'/detail/'+ item.id" class="search-item box border-bottom" v-for="item of list" :key="item.id">
            <img :src="getImages(item.images.small)" class="lazyimg" alt="">
            <div class="con">
              <div class="tit">{{item.title}}</div>
              <div class="desc">{{item.rating.average}}分  <span v-text="getGenres(item.genres)"></span></div>
            </div>
          </router-link>
          <li class="search-item border-bottom nodata" v-show="hasNodata">
            没有找到电影，请重新输入
          </li>
        </ul>
      </div>
    </div>
    <div class="type" v-show="have">
      <div class="plate" v-show="hasHisdata">
        <div class="tit box">
          <div class="tt">历史搜索</div>
          <div class="qc" @click="handleClear">清除</div>
        </div>
        <ul class="list">
          <li v-for="(item, index) of hiscondata" :key="index" class="border-bottom">
            {{item}}
          </li>
        </ul>
      </div>
      <div class="plate">
        <div class="tit">
          热门搜索
        </div>
        <ul class="list">
          <li v-for="item of hotlist" :key="item.id" class="border-bottom">
            {{item.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import storage from 'good-storage'
import {saveSearch} from '@/assets/js/cache.js'
export default {
  name: 'SearchHeader',
  props: {
    list: Array
  },
  data () {
    return {
      keyword: '',
      historyxs: false,
      hottxt: '',
      have: true,
      hiscondata: [],
      hotlist: [
        {
          id: '001',
          name: '大轰炸'
        },
        {
          id: '002',
          name: '反贪风暴3'
        },
        {
          id: '003',
          name: '阿尔法：狼伴归途'
        },
        {
          id: '004',
          name: '冷战'
        }
      ]
    }
  },
  computed: {
    hasNodata () {
      return !this.list.length
    },
    hasHisdata () {
      return this.hiscondata != undefined
    }
  },
  methods: {
    getImages (_url) {
      if (_url !== undefined) {
        let _u = _url.substring(7)
        return 'https://images.weserv.nl/?url=' + _u
      }
    },
    handleblur () {
      if (this.keyword !== '') {
	 		  saveSearch(this.keyword)
        this.keyword = ''
        this.hiscondata = storage.get('_search_')
      }
    },
    getGenres (e) {
      let x
      let arr = []
      for (x in e) {
        arr.push(e[x])
      }
      return arr.join('/')
    },
    handleClear () {
      storage.remove('_search_')
      this.hiscondata = storage.get('_search_')
    }
  },
  watch: {
    keyword () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.$emit('change', this.keyword)
        this.have = false
        if (this.keyword === '') {
          this.have = true
        }
      }, 300)
    }
  },
  created () {
    this.hiscondata = storage.get('_search_')
  },
  mounted () {
    this.hiscondata = storage.get('_search_')
  },
  beforeDestroy () {
    this.keyword = ''
  }
}
</script>

<style scoped lang="stylus">
  @import '~styles/varibles.styl'
  .search
    height: .62rem
    padding: .1rem .1rem
    background: $bgColor
    .head
      align-items: center
      .search-input
        box-sizing: border-box
        width: 100%
        height: .62rem
        padding: 0 .14rem
        line-height: .62rem
        text-align: left
        border-radius: .06rem
        color: #666
        background: #ffffff
      .back
        white-space: nowrap
        margin-left: .2rem
        color: #ffffff
        font-size: .28rem
  .search-content
    margin-top: .1rem
    background: #ccc
    .search-item
      height: 1.48rem
      background: #ffffff
      padding: .2rem
      &.nodata
        height: .64rem
        line-height: .64rem
      img
        width: 1rem
        height: 1.48rem
      .con
        margin-left: .2rem
        .tit
          font-size: .36rem
          color: #333333
          font-weight: bolder
          line-height: .48rem
          height: .96rem
        .desc
          font-size: .28rem
          color: #808080
  .type
    .tit
      background: #eeeeee
      height: 0.64rem
      line-height: 0.64rem
      padding: 0 0.2rem
      color: #808080
      .tt
        flex: 1
      .qc
        color: #333
    .list li
      height: 0.64rem
      line-height: 0.64rem
      padding: 0 0.2rem
</style>
